<template>
  <view>
     <!-- 搜索栏子组件 -->
     <view class="search-box">
         <my-search-bar placeholder="搜索" @click='goToSearch' />
     </view>
    <!-- 轮播图 -->
    <view>
      <swiper indicator-dots autoplay circular>
        <navigator
          :url="'/subpkg/goods_detail/index?goods_id=' + item.goods_id"
          open-type="navigate"
          hover-class="navigator-hover"
          v-for="item in swiperList"
          :key="item.goods_id"
        >
          <swiper-item>
            <image :src="item.image_src" mode="scaleToFill" />
          </swiper-item>
        </navigator>
      </swiper>
    </view>
    <!-- 菜单列表 -->
    <view class="nav-list">
      <image
        v-for="item in navList"
        :key="item.name"
        :src="item.image_src"
        class="nav-img"
        mode="scaleToFill"
        @click="navClick(item)"
      />
    </view>
    <!-- 底部列表 -->
    <view>
        <view v-for="item in floorList" :key="item.floor_title.image_src">
            <image class="floor-title" :src="item.floor_title.image_src" mode="widthFix"/>
            <view class="floor-img-box">
                <navigator :url="item.product_list[0].navigator_url"
                            open-type="navigate"
                            hover-class="navigator-hover"
                >
                <!-- 左侧大图片盒子 -->
                <image :style="{width:item.product_list[0].image_width+'rpx'}"
                        mode="widthFix"
                        :src="item.product_list[0].image_src"/>
                </navigator>
                <!-- 右侧图片 -->
                <view class="right-img-box">
                    <navigator :url="subitem.navigator_url"
                                open-type="navigate"
                                hover-class="navigator-hover"
                                v-for="(subitem,index) in item.product_list" :key="subitem.name"
                                v-show="index > 0"
                                >
                        <image 
                            :src="subitem.image_src"
                            mode="widthFix"
                            :style="{width:subitem.image_width+'rpx'}"/>
                    </navigator>

                </view>
            </view>
        </view>
    </view>
  </view>
</template>

<script>
import mySearchBar from '../../components/my-search-bar/my-search-bar.vue';
import badgeMix from '@/mixins/tabbar-badge.js'

export default {
  mixins : [badgeMix],
  components: { mySearchBar },
  data() {
    return {
      swiperList: [],//轮播图
      navList:[],//菜单列表
      floorList:[],//底部数据
    };
  },
  onLoad() {
    this.getSwiperList();
    this.getNavList();
    this.getFloorList()
  },
  methods: {
    async getSwiperList() {
      const res = await uni.$request({
        url: "home/swiperdata",
      });
      if (res.meta.status === 200) {
        this.swiperList = res.message;
      }
    },
    async getNavList(){
        const res = await uni.$request({
            url:'home/catitems'
        })
        if (res.meta.status === 200) {
            this.navList = res.message
        }
    },
    //菜单点击
    navClick(item){
        if ( item.name === '分类' ) {
            uni.switchTab({url:'../../pages/category/index'})
        }
    },
    async getFloorList(){
        const res = await uni.$request({
            url:'home/floordata'
        })
        if (res.meta.status === 200) {
            res.message.forEach(item=>{
                item.product_list.forEach(subitem=>{
                    subitem.navigator_url= '/subpkg/goods-list/index?' + subitem.navigator_url.split('?')[1]
                })
            })
            this.floorList = res.message
        }
    },
    goToSearch(){
      uni.navigateTo({
        url: '/subpkg/search/index'
      })
    }
  },
};
</script>

<style   scoped>
.search-box {
  position: sticky;
  top: 0;
  z-index: 999;
}
swiper {
  height: 400rpx;
}
.swiper-item,
image {
  width: 100%;
  height: 100%;
}
.nav-list {
  display: flex;
  justify-content: space-around;
  margin: 15px 0;
}

.nav-img {
  width: 128rpx;
  height: 140rpx;
}

.floor-title {
  height: 60rpx;
  width: 100%;
  display: flex;
}
.right-img-box {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.floor-img-box {
  display: flex;
  padding-left: 10rpx;
}

</style>